<template>
  <el-row type="flex"
          justify="center">
    <el-col :span="6"
            :offset="18">
      <el-form>
        <el-form-item>
          <span style="font-size:38px">欢迎回来</span>&nbsp;&nbsp;&nbsp;
          <span><span>没有账号？</span> <router-link style="color: #409EFF;text-decoration:none"
                         to="/register">前往注册 </router-link> </span>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginform.username"
                    placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginform.password"
                    show-password
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="login"
                     type="primary"
                     style="width: 100%;">登录</el-button>
          <p><span>忘记密码？</span> <router-link style="color: #409EFF;text-decoration:none"
                         to="/login">前往重置 </router-link> </p>
        </el-form-item>
      </el-form>
    </el-col>

  </el-row>
</template>

<script>
  export default {
    data () {
      return {
        loginform: {
          username: 'admin',
          password: '123',
        }
      }
    },
    methods: {
      // 用户登录请求
      login () {
        this.$axios.post('api/user/login', this.loginform)
          .then(res => {
            if (res.data.code == 200) {
              console.log(res.data.data);

              localStorage.setItem("token", res.data.data.jwt)
              this.$router.push('/')
            } else {
              this.$message.error('账号或密码错误');
            }
          })
      }
    }
  }
</script>

<style scoped>
  .el-row {
    /* background: darkslategray; */
    background-image: url("../assets/login.jpg");
    height: 100%;
  }
  .el-col {
    background: white;
    padding: 15% 20px;
    border-radius: 2px; /*加圆角 */
  }
  .el-input {
    margin: 8px 1px;
  }
</style>
